<script setup>
import { ref, onMounted } from 'vue'
import { sign, logins, codes } from '@/api/user'
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user.js'
const router = useRouter()
const UserStore = useUserStore()
// 样式
const title = ref()
const hrs = ref()
const box = ref()
// 3 切换
const register = ref()
const login = ref()
let flag = ref(true)
let codeflag = ref(true)
const code = ref(null)
onMounted(() => {
  // 1 闪烁模块 
  if (title.value && hrs.value) {
    let timerId = setInterval(function () {
      title.value?.classList.toggle('activeColor')
      hrs.value?.classList.toggle('activeColor')
    }, 1000)
  }
})

// 2 卡片效果
let x = 0
let y = 0
document.body.addEventListener("mousemove", (e) => {
  x = 30 / (document.body.clientWidth / e.clientX) - 15
  y = 30 / (document.body.clientHeight / e.clientY) - 15
  if (box.value) box.value.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`
})

// 3 切换模块
function togs1 () {
  if (flag.value) {
    login.value.style.transform = 'translate(1200px)'
    register.value.style.transform = ' translate(0px)'
  } else {
    register.value.style.transform = 'translate(1200px)'
    login.value.style.transform = 'translate(0px)'
  }
  flag.value = !flag.value
}
const reuser = ref('')
const reemail = ref('')
const repwd = ref('')
const recode = ref('')

// 4 验证码
let i = 30
let timerIds = 0
const edcode = async () => {
  if (codeflag.value) {
    codeflag.value = false
    code.value.innerHTML = `Get after ${i}`
    const res = await codes(reemail.value)
    console.log(res)
    timerIds = setInterval(function () {
      i--
      // 发送验证码
      code.value.innerHTML = `Get after ${i < 10 ? '0' + i : i}`
      if (i === 0) {
        code.value.innerHTML = `obtain code`
        clearInterval(timerIds)
        i = 5
        codeflag.value = true
      }
    }, 1000)
  }
}

/* 注册逻辑 start */
const registerdata = async () => {
  const res = await sign(reuser.value, reemail.value, repwd.value, recode.value)
  console.log(res)
  if (res.code !== 200) {
    alert('失败')
  }
  register.value.style.transform = 'translate(1200px)'
  login.value.style.transform = 'translate(0px)'
}

/* 注册逻辑 end */
/* 登录逻辑 start */
const louser = ref('')
const lopwd = ref('')

/* 登录逻辑 end */
const logindata = async () => {
  const res = await logins(louser.value, lopwd.value)
  // console.log(res)
  if (res.code === 200) {
    UserStore.user = res
    const cg = () => {
      ElMessage({
        message: 'res.msg',
        grouping: true,
        type: 'success',
      })
    }
    cg()
    console.log(UserStore.user)
    router.push('/')

  } else {
    const errors = () => {

      ElMessage({
        message: '登录失败',
        grouping: true,
        type: 'error',
      })
    }
    errors()
  }
}

</script>

<template>
  <div class="loginbox">
    <!-- 登录 -->
    <div class="login-main" id="particles-js">
      <div class="login-left" ref="box">
        <div class="title" ref="title">Login</div>
        <div class="hrs" ref="hrs"></div>
      </div>
      <div class="login-right " ref="login">
        <h1><i>Login</i></h1>
        <!-- <el-form class="login-from loform " :model="form" label-width="auto" style="max-width: 600px"> -->
        <div class="formv login-from loform">
          <div class="loginUser">
            <label>username:</label> <el-input
              style="margin-top: -8px; margin-left: -15px; width: 300px; height: 45px; border-radius: 0px;"
              v-model="louser" />
          </div>
          <span class="textlo"></span>
          <div class="loginPwd">
            <label>password:</label><el-input
              style="margin-top: -8px; margin-left: -8px; width: 300px; height: 45px; border-radius: 0px;"
              v-model="lopwd" type="password" />
          </div>
          <span class="textp"></span>
          <!-- <b>Qr code login</b> -->
          <button class="btn loginBtn" @click="logindata">LOGIN</button>
          <span class="go">Go to Register →</span>
          <!-- </form> -->
          <!-- </el-form> -->
        </div>
        <div @click="togs1" class="select"></div>
        <div class="icon-rotate-cw iconfont icon-yueqiu"></div>
      </div>
      <!-- 注册 -->
      <div class="register-right" ref="register">
        <h1><i>Register</i></h1>
        <!-- <el-form class="re-from reform" :model="form" label-width="auto" style="max-width: 600px"> -->
        <div class="froms  re-from reform">
          <!-- 用户 -->
          <div class="reUser">
            <label>username:</label> <el-input
              style="margin-top: -8px;   margin-left: 15px; width: 270px; height: 45px; border-radius: 0px;" clearable
              pattern="^[a-zA-Z0-9_]{8,10}$" required v-model="reuser" name="username" />
          </div>
          <span class="textpwd"></span>
          <!-- 密码 -->
          <div class="rePwd">
            <label>password:</label> <el-input
              style="margin-top: -8px; margin-left: 18px; width: 270px; height: 45px; border-radius: 0px;" show-password
              pattern="^[a-zA-Z0-9_]{8,10}$" required v-model="repwd" name="password" type="password" />
          </div>
          <span class="textpwd"></span>
          <!-- 邮箱 -->
          <div class="recode">
            <label>email:</label> <el-input
              style="margin-top: -8px; margin-left: 50px; width: 270px; height: 45px; border-radius: 0px;" clearable
              pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/" required v-model="reemail" name="recode" />
          </div>
          <span class="textcode"></span>
          <!-- 验证码 -->
          <div class="recode">
            <label>code:</label> <el-input
              style="margin-top: -8px; margin-left: 55px; width: 270px; height: 45px; border-radius: 0px;" clearable
              pattern="^[0-9]{4}$" required v-model="recode" name="recode" />
            <a href="#" class="code" ref="code" @click="edcode">obtain code</a>
          </div>
          <span class="textcode"></span>
          <!-- 确认 -->
          <button class="btn step" @click="registerdata">next step</button>
          <span class="go">Go to Login →</span>
          <!-- </el-form> -->
        </div>
        <!-- </form> -->
        <div @click="togs1" class="select  select2"></div>
        <div class="icon-rotate-cw iconfont icon-yueqiu"></div>
      </div>
    </div>
  </div>
</template>



<style lang="less" scoped>
* {
  font-family: '华文彩云'
}


.loginbox {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // background: linear-gradient(127deg, rgb(185, 185, 185), rgb(179, 34, 106)); ------
  background: linear-gradient(127deg, rgba(251, 115, 177, .8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(153, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

.login-main {
  transform-style: preserve-3d;
  position: relative;
  left: 0px;
  top: 0px;
  width: 900px;
  height: 600px;
  border-radius: 10px;
  margin: 100px auto 0px;
  transition: all .4s linear;
  // background-color: pink;

  .login-left {
    position: absolute;
    width: 400px;
    height: 600px;
    border-radius: 20px;
    background: url('../../assets/img/1.png') no-repeat center;
    background-size: 400px 600px;
    transform: translateZ(100px);
    transition: all .2s linear;


    box-shadow: 3px 2px 3px 3px rgba(0, 0, 0, 0.123);


    .title {
      padding: 400px 0px 120px;
      color: rgba(252, 168, 207, 0.546);
      font-size: 60px;
      text-align: center;
      transition: all 1s;
    }



    .hr {
      width: 60%;
      height: 2px;
      margin: -110px auto 0px;
      background: rgba(252, 168, 207, 0.635);
    }

    .activeColor {
      color: #fff;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.4);
    }
  }



  .login-right,
  .register-right {
    overflow: hidden;
    position: absolute;
    left: 420px;
    top: 0px;
    width: 500px;
    height: 600px;
    border-radius: 20px;
    // background-color: rgba(255, 255, 255, 0.15);
    // background: linear-gradient(to left, pink purple);
    background: rgba(214, 214, 214, 0.156);
    box-shadow: 3px 2px 3px 3px rgba(0, 0, 0, 0.123);
    transition: all .4s .4s;

    h1 {
      margin: 50px 0px 0px 0px;
      font-size: 80px;
      text-align: center;
      background: linear-gradient(90deg, #763ab7, #e91e63);
      color: transparent;
      background-clip: text;
      font-size: 50px;

    }

    p {
      margin: 10px 0px 0px 0px;
      font-size: 28px;
      text-align: center;
      color: #fff;
    }

    .login-from {
      list-style: none;

      .loginUser {
        margin-top: 70px;
      }

      div {
        width: 700px;
        height: 60px;
        margin: 5px 0px 0px 35px;


      }

      label {
        width: 150px;
        height: 60px;
        // color: rgb(200, 33, 200);
        color: #fff;
        font-size: 20px;
        line-height: 50px;
        margin-left: -10px;
        padding: 0px 15px 0px 0px;
        text-align: center;
      }

      input {
        width: 500px;
        height: 60px;
        border-radius: 40px;
        border: 0px solid #000;
        padding: 0px 35px;
        font-size: 18px;
        background: linear-gradient(127deg, rgba(251, 115, 177, .8), rgba(0, 255, 0, 0) 70.71%),
          linear-gradient(336deg, rgba(153, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
        color: #fff !important;
      }

      // 修改复选框
      p {
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: purple;

        a {
          display: block;
          padding: 0px 5px 0px;
          color: purple;
        }

        input {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          border: 0px;
          padding: 0px 20px 0px 0px;
        }
      }

      span {
        display: block;
        width: 160px;
        height: 20px;
        margin: 10px 0px 0px 71px;
        color: rgb(208, 18, 50);
        line-height: 20px;
        font-size: 14px;
        font-weight: 800;
      }

      .btn {
        display: block;
        width: 200px;
        height: 50px;
        margin: 40px auto;
        border: 0px solid #fff;
        border-radius: 40px;
        font-size: 18px;
        color: #fff;
        background: linear-gradient(336deg, rgba(251, 115, 177, .8), rgba(0, 255, 0, 0) 70.71%),
          linear-gradient(127deg, rgba(153, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);

        &:hover {
          text-shadow: 3px 2px 3px 3px rgba(0, 0, 0, 0.123);
          box-shadow: 3px 2px 3px 3px rgba(0, 0, 0, 0.123);
        }
      }

      .go {
        width: 400px;
        color: #fff;
        font-size: 12px;
        padding: 0px 0px 0px 270px;
      }
    }

    .select {
      position: absolute;
      right: -20px;
      bottom: -15px;
      width: 100px;
      height: 100px;
      border-radius: 30%;
      background-color: rgba(255, 255, 255, 0.1);
      text-align: center;
      line-height: 120px;
      transition: all .2s .2s;


      &:hover {
        // transform: rotate(360deg);
        right: 0px;
        bottom: 0px;
        width: 780px;
        height: 600px;
        border-radius: 0%;
        background-color: rgba(255, 255, 255, 0.2);

      }

    }

    .icon-rotate-cw {
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: -1;
      text-align: center;
      font-size: 50px;
      color: rgba(255, 255, 255, 0.4);
      transform: rotate(-45deg);
      // transition: all .4s linear;
      animation: move 7s linear 0s infinite;

    }

  }



  // 隐藏模块 start
  .active {
    transform: translate(1200px);
  }

  // 夹层模块


  // 注册模块 start
  .register-right {
    overflow: hidden;
    position: absolute;
    left: 420px;
    top: 0px;
    transform: translate(1200px, 0px);
    // transition: all 1s 1s linear;


    h1 {
      margin: 50px 0px 0px 0px;
      font-size: 50px;
      background: linear-gradient(90deg, #763ab7, #e91e63);
      color: transparent;
      background-clip: text;
      /* 文本颜色设置为透明，以显示背景 */
    }

    .re-from {
      list-style: none;
      margin-top: 30px;

      div {
        position: relative;
        width: 500px;
        height: 50px;
        margin: 5px 0px 0px 70px;

        a {
          position: absolute;
          right: 95px;
          margin-top: 10px;
          color: rgb(255, 255, 255);
          text-decoration: none;

        }
      }

      label {
        width: 100px;
        height: 60px;
        margin-left: -50px;
        color: #000000;
        font-size: 20px;
        line-height: 40px;
        color: #fff;
      }

      input {
        position: absolute;
        right: 60px;
        width: 200px;
        height: 40px;
        border-radius: 40px;
        border: 0px solid #000;
        padding: 0px 0px;
        font-size: 16px;
        background: linear-gradient(127deg, rgba(251, 115, 177, .8), rgba(0, 255, 0, 0) 70.71%),
          linear-gradient(336deg, rgba(153, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
        color: #fff;
      }

      // 修改复选框
      // p a input 都删了
      span {
        display: block;
        width: 200px;
        height: 20px;
        margin: 6px 0px 8px 71px;
        color: rgb(208, 18, 50);
        line-height: 20px;
        font-size: 14px;
        font-weight: 800;
      }

      .btn {
        display: block;
        width: 200px;
        height: 50px;
        margin: -10px auto 0px;
        border: 0px solid #fff;
        border-radius: 40px;
        font-size: 18px;
        color: #fff;
        background: linear-gradient(336deg, rgba(251, 115, 177, .8), rgba(0, 255, 0, 0) 70.71%),
          linear-gradient(127deg, rgba(153, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);

        &:hover {
          text-shadow: 3px 2px 3px 3px rgba(0, 0, 0, 0.123);
          box-shadow: 3px 2px 3px 3px rgba(0, 0, 0, 0.123);
        }
      }

      .go {
        width: 400px;
        color: #fff;
        font-size: 12px;
        padding: 45px 0px 0px 280px;
      }
    }

    .select {
      border-radius: 30%;
      background-color: rgba(255, 255, 255, 0.1);
      text-align: center;
      line-height: 120px;
      transition: all .2s .2s;

      &:hover {
        // transform: rotate(360deg);
        width: 800px;
        height: 600px;
        border-radius: 0%;
      }
    }

    .icon-rotate-cw {
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: -1;
      text-align: center;
      font-size: 50px;
      color: rgba(255, 255, 255, 0.4);
      // transform: rotate(-45deg);
      // transition: all .4s linear;
      animation: move 7s linear 0s infinite;
    }
  }
}

@keyframes move {
  0% {
    right: 10px;
    bottom: 10px;
    transform: rotate(-45deg);
  }

  100% {
    right: 10px;
    bottom: 10px;
    transform: rotate(1200deg);
  }
}
</style>